<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>指令</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        .wrapper { border: 1px solid blue ; }
        .row { display: flex ; }
        .row>span { flex-basis: 200px ; }
    </style>
</head>
<body>
    <h3>指令: v-show</h3>

    <div id="app">
        <label for="book-id">图书编号</label>
        <input type="text" v-model="id" id="book-id">
        <label for="book-name">图书名称</label>
        <input type="text" v-model="name" id="book-name">
        <button type="button" @click="add">添加</button>
        <hr>
        <div class="wrapper" v-show="books.length != 0">
            <div class="row" v-for="( b , i ) in books" :key="b.id" >
                <span>{{ i + 1 }}</span>
                <span>{{ b.id }}</span>
                <span>{{ b.name }}</span>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        const app = Vue.createApp({ 
            data(){
                return {
                    id: '' ,
                    name: '' ,
                    books: []
                }
            },
            methods: {
                add(){
                    let book = { id : this.id , name: this.name }
                    this.books.push( book );
                    this.id = '' ;
                    this.name = '' ;
                }
            }
        });

        const vm = app.mount( "#app" );
        console.log( vm );
    </script>
    
</body>
</html>